<template>
  <el-container>
    <el-header style="border-style: none;text-align: left;margin-top: 0px;padding-left: 6px" height="45px">
      <!--        <monitor-button></monitor-button>-->
      <el-table ref="title" class="customer-table" :data="titleData" :show-header="false" :height="50" :cell-style="changeCellStyle">
        <el-table-column property="shebei" width="100"></el-table-column>
        <el-table-column property="dianliu_t" width="100"></el-table-column>
        <el-table-column class="dianliu" property="dianliu" width="120"></el-table-column>
        <el-table-column property="sudu_t" width="100"></el-table-column>
        <el-table-column property="qiegesudu" width="120"></el-table-column>
        <el-table-column property="zhendong_t" width="100"></el-table-column>
        <el-table-column property="zhendong" width="150"></el-table-column>
        <el-table-column property="dianji_t" width="100"></el-table-column>
        <el-table-column property="dianjizhuansu" width="120"></el-table-column>
      </el-table>
    </el-header>
    <el-main style="padding-top: 3px;padding-left: 12px;padding-bottom: 15px">
      <qie-monitoring ref="qiemonitoring"></qie-monitoring>
    </el-main>
    <el-footer ref="footer" style="border-style: solid;border-color: #D2B48C;margin-left:12px;margin-right: 4px;margin-top: 0px;padding-left: 2px;padding-right: 2px" height="290px">
      <qie-monitor-table ref="qiemonitortable"></qie-monitor-table>
    </el-footer>
  </el-container>
</template>

<script>
import QieMonitoring from './QieMonitoring'
import QieMonitorTable from './QieMonitorTable'

export default {
  name: 'Qiegeji',
  components: {QieMonitorTable, QieMonitoring},
  data () {
    return {
      url: '/P2/moni_qiegeji',
      qiegejiid: '1',
      title: [],
      titleData: [{
        shebei: '切割机一',
        dianliu_t: '电流',
        dianliu: '',
        sudu_t: '切割速度',
        qiegesudu: '120',
        zhendong_t: '振动',
        zhendong: '100',
        dianji_t: '电机转速',
        dianjizhuansu: '64986469'
      }],
      itemkey: []
    }
  },
  methods: {
    getParams () {
      const routeParams = this.$route.query
      var id = routeParams.equipId
      switch (id) {
        case '1-1':
          this.qiegejiid = '1'
          break
        case '1-2':
          this.qiegejiid = '2'
          break
        case '1-3':
          this.qiegejiid = '3'
          break
        case '1-4':
          this.qiegejiid = '4'
          break
      }
    },
    refreshData (url) {
      this.$http({
        url: this.$http.adornUrl(url),
        method: 'post',
        data:{
          qiegejiid: this.qiegejiid
        }
      }).then(response => {
          this.$refs.qiemonitoring.welding = response.data
          this.refreshTitle(response.data, this.qiegejiid)
          this.$refs.qiemonitoring.paintDianliu()
          this.$refs.qiemonitoring.paintSudu()
          this.$refs.qiemonitoring.paintZhendong()
          this.$refs.qiemonitoring.paintZhuansu()
          this.$refs.qiemonitortable.refreshTable()
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    refreshTitle (itemkey, hanjiid) {
      switch (hanjiid) {
        case '1':
          this.titleData[0].shebei = '切割机一'
          break
        case '2':
          this.titleData[0].shebei = '切割机二'
          break
        case '3':
          this.titleData[0].shebei = '切割机三'
          break
        case '4':
          this.titleData[0].shebei = '切割机四'
          break
      }
      this.title = itemkey
      this.titleData[0].dianliu = this.title[0].dianliu
      this.titleData[0].qiegesudu = this.title[0].qiegesudu
      this.titleData[0].zhendong = this.title[0].zhendong
      this.titleData[0].dianjizhuansu = this.title[0].dianjizhuansu
    },
    timer () {
      return setInterval(() => {
        this.refreshData(this.url)
      }, 1000)
    }
  },
  created () {
    this.getParams()
    this.timer()
  },
  watch: {
    '$route': function () {
      this.getParams()
    }
  }
}
</script>

<style scoped>

</style>
